import React from 'react';
import { Tooltip as AntdTooltip } from 'antd';
import type { TooltipPropsWithOverlay } from 'antd/es/tooltip';

interface Props extends TooltipPropsWithOverlay {
  shouldWrapChildren?: boolean;
}

export const Tooltip = ({ children, shouldWrapChildren = true, title, ...props }: Props) => {
  let content = children;

  if (shouldWrapChildren && !React.isValidElement(children)) {
    content = <span>{children}</span>;
  }

  return (
    <AntdTooltip color="#fff" {...props} title={title}>
      {content}
    </AntdTooltip>
  );
};
